<div class="overflow-y-scroll h-100">
  <div class="d-flex flex-row-reverse me-3">
    <button class="btn btn-primary" (click)="goBack()">返回</button>
  </div>
  <form novalidate [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <div class="form-group">
      <label>端点基址</label>
      <input class="form-control" name="baseUrl" formControlName="baseUrl"
             placeholder="请输入api端点地址，示例: https://api.openai.com"
      >
      @if (validateForm.controls['baseUrl'].invalid && validateForm.controls['baseUrl'].dirty) {
        <li>
          端点基址是必须的
        </li>
      }
    </div>
    <div class="form-group">
      <label>密钥</label>
      <input class="form-control" name="apiKey" formControlName="apiKey"
             placeholder="请输入密钥，示例 sk-sdhfhdofe89refoifsofiws"
      >
      @if (validateForm.controls['apiKey'].invalid && validateForm.controls['apiKey'].dirty) {
        <li>
          密钥是必须的
        </li>
      }
    </div>
  </form>
  <div class="my-2">
    <label>模型相对价格</label>
    <div class="d-flex justify-content-start mt-1">
      <table class="table table-sm table-bordered">
        <thead>
        <th>模型名</th>
        <th>模型相对价格</th>
        <th>操作</th>
        </thead>
        <tbody>
          @if (modelFees.length === 0) {
            <div>点击下面模型添加 "模型&价格"。</div>
          } @else {
            @for (modelFee of modelFees; track modelFee!.modelId) {
              <tr nz-tooltip nzTooltipTitle='移除'>
                <td>
                  <div class="ms-2 mt-2">
                    {{ modelFee.model?.name }}
                  </div>
                </td>
                <td>
                  <div class="m-auto pb-1 justify-content-end align-items-center d-flex">
                    <nz-input-number
                      style="width: 120px;"
                      [nzMin]="0.01"
                      [(ngModel)]="modelFee.fee"
                    />
                  </div>
                </td>
                <td>
                  <button class="btn btn-warning"
                          (click)="action(modelFee.model!)">移除
                  </button>
                </td>
              </tr>
              <tr></tr>
            }
          }

        </tbody>
      </table>

    </div>
  </div>
  <div class="d-flex flex-row-reverse">
    <button class="btn btn-primary me-3" (click)="fetchModels(true)">刷新</button>
  </div>
  <div>
    <div>所有的模型</div>
    <div class="d-flex flex-wrap justify-content-start">
      @if (allModels !== undefined) {
        @for (model of allModels; track model!.modelId) {
          <div
            class="border-black border-1 solid m-1 rounded-3 p-2"
            [class.active]="active(model.modelId!)"
            nz-tooltip [nzTooltipTitle]='actionTip(model.modelId!)'
            (click)="action(model)"
          >{{ model.name }}
          </div>
        }
      }
    </div>
  </div>

  <div class="d-flex flex-row-reverse">
    <button class="btn btn-primary me-3" (click)="submitForm()">添加</button>
  </div>

</div>
